import React, { Component,PropTypes } from 'react';
import {Link} from 'react-router';
import {WechatAuth} from '../../Action/autoLogin'
import Split from '../CommonComponent/Split'
import Footer from '../CommonComponent/Footer'
import TitleClassify from '../CommonComponent/TitleClassify'
import '../../Stylesheets/wx/sm.min.css'
import '../../Stylesheets/wx/personalCenter.css'
import {saveToken,loadToken,GetQueryString,getToken} from '../../Action/rpc';
import {MyInfo} from '../../Action/auth';

const ItemList = [
    {name:'代理结构图',imgUrl:require('../../Images/headerImg.jpg'),link:'/agentStructure'},
    {name:'意向代理',imgUrl:require('../../Images/headerImg.jpg'),link:'/intentionalAgent'},
    {name:'我的推荐',imgUrl:require('../../Images/headerImg.jpg'),link:'/myRecommend'},
    {name:'代理轨迹',imgUrl:require('../../Images/headerImg.jpg'),link:'/agentTrail'},
    {name:'授权证书',imgUrl:require('../../Images/headerImg.jpg'),link:'/toPower'},
    {name:'代理审核',imgUrl:require('../../Images/headerImg.jpg'),link:'/agentExamine'},
    {name:'申请取消',imgUrl:require('../../Images/headerImg.jpg'),link:'/applyCancle'},
    {name:'代理升级',imgUrl:require('../../Images/headerImg.jpg'),link:'/agentUpgrade'},
    {name:'下级代理',imgUrl:require('../../Images/headerImg.jpg'),link:'/subordinate'}
]

const OrderList = [
    {title:'我的订单',imgUrl:require('../../Images/headerImg.jpg'),link:'/orderList'},
    {title:'在线下单',imgUrl:require('../../Images/headerImg.jpg'),link:'/onlineOrder'},
    {title:'待处理订单',imgUrl:require('../../Images/headerImg.jpg'),link:'/pendingOrder'},
    {title:'操作订单',imgUrl:require('../../Images/headerImg.jpg'),link:'/handleOrder'}
]
export default class UserCenter extends Component {

    async componentWillMount() {
        const getToken = await loadToken();
        this.getMyInfo();
    }
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            name:'',
            img:'',
            agentName:'',
            stepName:'',
            nowPoints:'',
            teamName:''
        };
    }

    static contextTypes = {
        router:PropTypes.object
    }

    async getMyInfo(){
        await MyInfo()
            .then(res=>{
                sessionStorage.setItem('myAgent',res.AGENT_GRADE);
                if(res.AGENT_GRADE>0){
                    this.context.router.push({pathname:'/personalCenter'})
                }
                this.setState({nowPoints:res.NOW_POINTS})
                this.setState({name:res.MEMBER_NAME})
                this.setState({img:res.IMAGE_URI})
                this.setState({agentName:res.LEADER_NAME})
                this.setState({stepName:res.AGENT_NAME})
                this.setState({teamName:res.TEAM_NAME});
            })
    }

    render(){
        const {name,img,agentName,stepName,nowPoints,teamName} = this.state
        return(
            <div>
                <div className="containerNav">
                    <div className="posr borderBtn" style={{backgroundColor:'rgba(0,0,0,0.4)',paddingTop:30,paddingBottom:35,marginBottom:22,overflow:'hidden'}}>
                        <div style={{zIndex:100,opacity:0}}>
                            <div className="flex width100 flex-align-center flex-pack-center">
                                <Link to={'/toPower'}>
                                    <div className="flex flex-v flex-align-center" style={{width:60}}>
                                        <img src={require('../../Images/common/authority.png')} style={{width:24,height:27,marginBottom:7}} alt=""/>
                                        <span className="colorfff f10">授权</span>
                                    </div>
                                </Link>
                                <div className="border_ra50" style={{marginLeft:45,marginRight:45,width:60,height:60}}>
                                    <img className="border_ra50" src={img} alt=""/>
                                </div>

                                <Link to={'/erCode'}>
                                    <div className="flex flex-v flex-align-center" style={{width:60}}>
                                        <img src={require('../../Images/common/erCode.png')} style={{width:24,height:23,marginBottom:7}} alt=""/>
                                        <span className="colorfff f10">邀请二维码</span>
                                    </div>
                                </Link>
                            </div>
                            <p className="colorfff f16 tc" style={{marginTop:10,marginBottom:20,height:20}}>{name}</p>
                            <div className="tc colorfff f12">
                                <span className="colorye di borderOfficial padd3" style={{height:20,borderRadius:5,marginRight:10}}>{stepName?stepName:'维魅力'}</span>
                                <span>上级:</span><span className="di ml">{agentName}</span>
                                <span className="di ml1">团队:</span><span className="di ml">{teamName}</span>
                            </div>
                        </div>
                        <div className="pa width100 borderBtn" style={{left:0,top:0,bottom:0,zIndex:1,overflow:'hidden'}}>
                            <img className="blur"
                                 src={img} alt=""
                                 style={{opacity:0.6}}
                            />
                        </div>
                        <div style={{zIndex:100,position:'absolute',top:0,paddingTop:30,paddingBottom:35,marginBottom:22}} className="width100">
                            <div className="flex width100 flex-align-center flex-pack-center">
                                <Link to={'/toPower'}>
                                    <div className="flex flex-v flex-align-center" style={{width:60}}>
                                        <img src={require('../../Images/common/authority.png')} style={{width:24,height:27,marginBottom:7}} alt=""/>
                                        <span className="colorfff f10">授权</span>
                                    </div>
                                </Link>
                                <div className="border_ra50" style={{marginLeft:45,marginRight:45,width:60,height:60}}>
                                    <img className="border_ra50" src={img} alt=""/>
                                </div>
                                <Link to={'/erCode'}>
                                    <div className="flex flex-v flex-align-center" style={{width:60}}>
                                        <img src={require('../../Images/common/erCode.png')} style={{width:24,height:23,marginBottom:7}} alt=""/>
                                        <span className="colorfff f10">邀请二维码</span>
                                    </div>
                                </Link>
                            </div>
                            <p className="colorfff f16 tc" style={{marginTop:10,marginBottom:20,height:20}}>{name}</p>
                            <div className="tc colorfff f12">
                                <span className="colorye di borderOfficial padd3" style={{height:20,borderRadius:5,marginRight:10}}>{stepName?stepName:'维魅力'}</span>
                                <span>上级:</span><span className="di ml">{agentName}</span>
                                <span className="di ml1">团队:</span><span className="di ml">{teamName}</span>
                            </div>
                        </div>
                    </div>
                    <Split />
                    <TitleClassify
                        title ={'资金管理'}
                        index={0}
                        img={require('../../Images/common/balance.png')}
                    />
                    <div className="flex flex-pack-justify" style={{height:'6.25rem'}}>
                        <Link to="/balance" className="di flex-1 homePage">
                            <div className="width100 height100 balanceBorder flex flex-v flex-pack-center flex-align-center">
                                <span className="di" style={{width:40,height:40}}>
                                    <img src={require('../../Images/common/myBalance.png')} alt=""/>
                                </span>
                                <div className="color9 f14" style={{marginTop:10}}>我的余额</div>
                            </div>
                        </Link>
                        {/*<Link to="/MyPoints" className="di flex-1 homePage">
                            <div className="width100 height100 balanceBorder flex flex-v flex-pack-center flex-align-center" >
                                <span className="di" style={{width:40,height:40}}>
                                    <img src={require('../../Images/common/exam.png')} alt=""/>
                                </span>
                                <div className="color9 f14" style={{marginTop:10}}>我的积分</div>
                            </div>
                        </Link>
                        <Link
                            to="/myBankList"
                            className="di flex-1 homePage"
                        >
                            <div className="width100 height100 balanceBorder flex flex-v flex-pack-center flex-align-center" >
                                <span className="di" style={{width:40,height:40}}>
                                    <img src={require('../../Images/common/bankList.png')} alt=""/>
                                </span>
                                <div className="color9 f14" style={{marginTop:10}}>银行卡</div>
                            </div>
                        </Link>*/}
                        <div className="di homePage flex-1"></div>
                        <div className="di homePage flex-1"></div>
                    </div>
                    <Split />
                    <TitleClassify
                        title ={'订单管理'}
                        index={5}
                        img={require('../../Images/common/order.png')}
                    />
                    <div className="flex flex-pack-justify " style={{height:'6.25rem'}}>
                        <Link
                            to="/orderList"
                            className="di flex-1 homePage"
                            query={{index: 0}}
                        >
                            <div className="width100 height100 order balanceBorder flex flex-v flex-pack-center flex-align-center">
                                <span className="di" style={{width:40,height:40}}>
                                    <img src={require('../../Images/common/myOrder.png')} alt=""/>
                                </span>
                                <div className="color9 f14" style={{marginTop:10}}>我的订单</div>
                            </div>
                        </Link>
                        <div className="di homePage flex-1"></div>
                        <div className="di homePage flex-1"></div>
                    </div>
                    <Split />
                    <TitleClassify
                        title ={'代理管理'}
                        index={4}
                        img={require('../../Images/common/agent.png')}
                    />
                    <div className="flex flex-pack-justify " style={{height:'6.25rem'}}>
                        <Link
                            to="/authorization"
                            className="di flex-1 homePage"
                            query={{index: 0}}
                        >
                            <div className="width100 height100 order balanceBorder flex flex-v flex-pack-center flex-align-center">
                                <span className="di" style={{width:40,height:40}}>
                                    <img src={require('../../Images/common/agentUp.png')} alt=""/>
                                </span>
                                <div className="color9 f14" style={{marginTop:10}}>申请成为代理</div>
                            </div>
                        </Link>
                        <div className="di homePage flex-1"></div>
                        <div className="di homePage flex-1"></div>
                    </div>
                    <div style={{height:'80'}}></div>
                </div>
                <Footer
                    index = {3}
                />
            </div>
        )
    }
}
